<template>
	<view class="mi_circle_buyshow">
		<popComment :show='commentShow' :total='commentTotal'
		 :comment_type='comment_type'
		 :product_id='commentId' @closePop='closePop'></popComment>
		<view class="mi-circle-tags">
			<view class="ul">
				<block v-for="(item,index) in tag_list" :key="index">
					<view class="li  el-flex" :class="{active:tabIndex==index}" @click="tabIndex=index">
						<view class="text">
							{{item.tag_name}}
						</view>
						<text v-if="item.profile_num!=0">{{item.profile_num}}</text>
					</view>
				</block>
			</view>
		</view>
		<template v-if="isLoading">
			<view style="width: 100%;height: 5.72rem;" class='el-flex'>
				<view>
					<u-loading-icon size="80"></u-loading-icon>
				</view>
			</view>
		</template>
		<template v-else>
			<template v-if="rec_list.length===0">
				<noData></noData>
			</template>
			<template v-else>
				<view class="touchBox list-container">
					<block v-for="(item,index) in rec_list" :key="index">
						<template>
							<view class="card rec-card">
								<view class="user">
									<view class="user-avatar">
										<LazyLoad :src="item.user_avatar" width='100%' height='100%'></LazyLoad>
									</view>
									<view class="user-info">
										<view class="user-info-name">
											{{item.user_name}}
										</view>
									</view>
									<view class="user-ctrl"></view>
								</view>
								<view class="card-content" @click="toMicirleDetail(item)">
									<view class="normal">
										<rich-text :nodes="item.comment_content" class="content"></rich-text>
										<template
											v-if="(typeof(item.image_infos) != 'undefined')||((typeof(item.image_infos) != 'undefined')&&item.image_infos.length == 0)">
											<imageList :pic_list='item.image_infos' keyName="img_url">
											</imageList>
										</template>
									</view>
								</view>
								<view class="card-ctrl">
									<view class="shar-btn">
										<image src="../../../static/images/m_b_share.png" mode=""></image>
									</view>
									<view class="send-btn" @click="commentItem(item)">
										<image src="../../../static/images/m_b_msg.png" mode=""></image>
										<text class="num"
											v-if="item.user_reply_num&&item.user_reply_num!=0">{{item.user_reply_num}}</text>
									</view>
									<view class="praise-btn">
										<image src="../../../static/images/m_b_praisa.png" mode=""></image>
										<text class="num" v-if="item.up_num&&item.up_num!=0">{{item.up_num}}</text>
									</view>
								</view>
							</view>

						</template>
					</block>
				</view>

			</template>
		</template>
	</view>
</template>

<script>
	import noData from '../../noData/noData.vue'
	import popComment from '../../popComment/popComment.vue'
	import imageList from '../moment_images/moment_images.vue'
	export default {
		props: ['commodity_id', 'page_index'],
		components: {
			imageList,
			noData,popComment
		},
		data() {
			return {
				isLoading: false,
				tabIndex: 0,
				session_id: Math.round((1e10 * Math.random())),
				profile_id: '',
				content_list: [],
				need_detail: true,
				tag_list: [],
				rec_list: [],
				total_count: '',
				isReq: false,
				commentShow:false,
				comment_type:'',
				commentId:'',
				commentTotal:0
			};
		},
		watch: {
			page_index(newVal) {
				if (this.isReq) return;
				if (this.rec_list.length >= this.total_count) return;
				this.getBuyerShowList(true)
			},
			tabIndex(newVal) {
				this.profile_id = this.tag_list[newVal].profile_id
				if (this.profile_id == 0) {
					this.profile_id = ''
				}
				this.isLoading = true
				this.isReq = true
				this.$emit('chanegPage_index')
				this.getBuyerShowList()
			}
		},
		methods: {
			closePop() {
				this.commentShow = false
			},
			commentItem(item) {
				this.commentShow = true
				this.comment_type = 'product_comment'
				this.commentId = item.comment_id
				if (item.user_reply_num == '') {
					this.commentTotal = 0
				} else {
					this.commentTotal = item.comment_num
				}
			},
			toMicirleDetail(item) {
				let id = item.comment_id
				if (id) {
					uni.navigateTo({
						url: `/secPage/micircleDetail/micircleDetail?id=${id}`,
					})
				}
			},
			getBuyerShowList(flag) {
				this.$request.get('/getBuyerShowList', {
					commodity_id: this.commodity_id,
					session_id: this.session_id,
					page_index: this.page_index,
					profile_id: this.profile_id,
					need_detail: this.need_detail,
				}).then((res) => {
					this.isReq = false
					this.total_count = res.data.data.total_count
					if (this.tag_list.length == 0) {
						this.tag_list = res.data.data.detail.comment_tags
					}
					let list = res.data.data.comments
					if (flag) {
						this.rec_list = this.rec_list.concat(list)
					} else {
						this.rec_list = list
					}
					this.isLoading = false
				}).catch(e => {
					console.log('错误了:', e)
				})
			}
		},
		mounted() {
			this.getBuyerShowList()
		}
	}
</script>

<style scoped lang="scss">
	.mi-circle-tags {
		padding: 0.26rem 0.24rem 0.2rem;
		margin: 0 -0.24rem;
		background-color: #f9f9f9;

		.ul {
			overflow: hidden;
			max-height: 1.25rem;

			.li {
				list-style: none;
				height: 0.54rem;
				border-radius: 0.27rem;

				justify-content: center;
				float: left;
				margin-right: 0.16rem;
				margin-bottom: 0.16rem;
				padding: 0 0.24rem;
				background: #fff;

				text {
					font-size: .24rem;
					font-weight: 700;
					line-height: .24rem;
					display: inline-block;
					padding-left: 0.1rem;
				}

				.text {
					font-size: .24rem;
					font-weight: 700;
					line-height: .24rem;
				}
			}

			.active {
				background: #ff5934;
				color: #fff;
			}
		}
	}

	.mi_circle_buyshow {
		.list-container {
			.rec-card {
				padding-top: 0.3rem;
				text-align: left;

				&:not(:last-child):after {
					margin-left: -0.24rem;
					margin-right: -0.24rem;
					display: block;
					content: "";
					border-bottom: 0.12rem solid #f6f6f6;
				}


				.user {
					margin-bottom: 0.2rem;
					display: flex;
					align-items: center;

					.user-avatar {
						margin-right: 0.16rem;
						width: 0.52rem;
						height: 0.52rem;
						border-radius: 0.52rem;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.user-info {
						flex: 1;

						.user-info-name {
							font-size: .24rem;
							font-weight: 500;
							color: #161616;
							line-height: 1.4;
						}
					}

					.user-ctrl {
						margin-left: 0.1rem;
						width: 0.4rem;
						height: 0.4rem;
						background: url(../../../static/images/h_three.png) 50% no-repeat;
						background-size: 100% 100%;
					}
				}

				.card-content {
					margin-bottom: 0.27rem;
					position: relative;

					.user-ctrl {
						width: 0.4rem;
						height: 0.4rem;
						background: url(../../../static/images/h_three.png) 50% no-repeat;
						background-size: 100% 100%;
						position: absolute;
						top: 0;
						right: 0;
					}

					.title {
						margin-bottom: 0.12rem;
						max-width: 6.3rem;
						overflow: hidden;
						text-overflow: ellipsis;
						justify-content: flex-start;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						font-weight: 500;
						color: #161616;
						font-size: .3rem;

						.question-i {
							display: inline-block;
							margin-right: 0.08rem;
							width: 0.29rem;
							height: 0.29rem;
							vertical-align: -.038rem;

							image {
								width: 0.29rem;
								height: 0.29rem;
							}

						}
					}

					.moment-tags {
						max-height: 1.2rem;
						overflow: hidden;

						.tags-item {
							float: left;
							display: flex;
							align-items: center;
							padding: 0.09rem;
							margin-right: 0.14rem;
							max-width: 6.6rem;
							margin-bottom: 0.18rem;
							line-height: .24rem;
							border-radius: 0.06rem;
							font-size: .2rem;
							font-weight: 500;
							color: #757575;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							background: none;
							padding-left: 0px;
							padding-right: 0px;

							text {}
						}
					}

					.line {
						margin-bottom: 0.23rem;
						display: block;
						height: 0;
						border-bottom: 1px solid hsla(0, 0%, 92%, .6);
					}

					.answers {
						.answers-item {
							display: flex !important;
							margin-bottom: 0.2rem;
							line-height: .32rem;
							font-size: .28rem;
							color: #000;
							justify-content: flex-start;

							.icon {
								margin-right: 0.16rem;
								width: 0.32rem;
								height: 0.32rem;
								border-radius: 50%;
								overflow: hidden;

								image {
									width: 0.32rem;
									height: 0.32rem;
								}
							}

							.text {
								max-width: 5.8rem;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 1;
							}
						}
					}

					.normal {

						.content {
							font-size: .3rem;
							font-weight: 500;
							color: #161616;
							line-height: 1.6;
							word-wrap: break-word;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;


						}

					}
				}

				.card-ctrl {
					padding: 0 .1rem;
					padding-bottom: 0.2rem;

					display: flex;
					justify-content: space-around;

					view {
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 0.4rem;
							height: 0.4rem;
							margin-right: .05rem;
						}

						.num {
							font-size: .24rem;
							font-family: DIN-Medium, DIN;
							font-weight: 500;
							color: #757575;
						}
					}
				}
			}
		}
	}
</style>